<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <meta name=viewport content="initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel=icon type=image/png sizes=32x32 href=img/icons/favicon-32x32.png>
    <link rel=icon type=image/png sizes=16x16 href=img/icons/favicon-16x16.png>
    <meta name=theme-color content=#4DBA87>
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name=apple-mobile-web-app-title content="音乐播放器">
    <meta name=apple-touch-fullscreen content=yes>
    <link rel=apple-touch-icon href=img/icons/apple-touch-icon-152x152.png>
    <link rel=mask-icon href=img/icons/safari-pinned-tab.svg color=#4DBA87>
    <meta name=msapplication-TileImage content=img/icons/msapplication-icon-144x144.png>
    <meta name=msapplication-TileColor content=#000000>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong></strong>
    </noscript>
    <div id="app"></div>
  </body>
  <script>
    (function(){
      var width = window.innerWidth
      var heigth = window.innerHeight
      var isIphone = navigator.userAgent.indexOf('iPhone') > -1
      if (width > 650)  width = 650
      var screenRatio = Math.round(heigth / width * 100) / 100
      console.log(width, heigth, screenRatio)
      document.documentElement.style.fontSize = width / 10 + 'px'     
      if (screenRatio > 2.15 && isIphone) {
        document.documentElement.classList.add('iphone-top-padding')
      }
    })()
  </script>
</html>
